<template>
	<view class="container">
		<!-- 筛选区域 -->
		<view class="filter-tabs">
			<view class="tab-list">
				<view class="tab-item" v-for="(item, index) in filterTabs" :key="index" @click="handleTabClick(index)">
					<text :class="['tab-text', currentTab === index ? 'active' : '']">
						{{ item.name }}
					</text>
					<u-icon :name="currentTab === index ? 'arrow-up' : 'arrow-down'" size="12"
						:color="currentTab === index ? '#2979ff' : '#666'"></u-icon>
				</view>
			</view>
		</view>
		<z-paging ref="paging" v-model="houseList" @query="queryList">
			<template #empty>暂无数据</template>
			<!-- 房源列表 -->
			<!-- <scroll-view
      scroll-y
      class="scroll_box"
      :scroll-top="scrollTop"
      @scrolltolower="onreachBottom()"
      @scroll="scroll"> -->
			<view class="house-list">
				<view class="house-item" v-for="(item, index) in houseList" :key="index" @click.stop="toDetail(item)">
					<!-- 用户信息 -->
					<view class="user-info">
						<view class="user-info-left">
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
							<text class="nickname">{{ item.name }}</text>
							<!-- <text class="location">IP{{ item.loginip }}</text> -->
							<view class="tag">房屋转租</view>
						</view>
						<view class="user-info-right">
							<button class="share-item" open-type="share" @click.stop="detailInfo = item"
								hover-class='none'>
								<u-icon name="share" color="#ffffff" size="28rpx"></u-icon>
							</button>
						</view>
					</view>

					<!-- 房源信息 -->
					<view class="house-info">
						<view class="price-info">
							<text class="label">房子租金：</text>
							<text class="price">{{ item.money }}元/月</text>
						</view>
						<view class="type-info">
							<text class="label">转租户型：</text>
							<text class="value">{{ item.house_type }}</text>
						</view>
						<view class="price-info">
							<text class="label">楼层：</text>
							<text class="price">{{ item.floor }}</text>
						</view>
						<view class="contract-info">
							<text class="label">合同方式：</text>
							<text class="value">{{ item.contract_type }}</text>
						</view>
					</view>

					<!-- 拨打电话按钮 -->
					<view class="call-btn" @click.stop="makePhoneCall(item.phone)">
						<u-icon name="phone" color="#2979ff" size="28"></u-icon>
						<text>打电话</text>
					</view>

					<!-- 房源图片 -->
					<view class="image-list">
						<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill"
							class="house-img"></image>
					</view>

					<!-- 地址信息 -->
					<view class="address-info">
						<u-icon name="map" color="#07c160" size="22"></u-icon>
						<text class="address">{{ item.address }}</text>
					</view>

					<!-- 浏览信息 -->
					<view class="view-info">
						<view class="texts">
							<text class="views">{{ item.click }}浏览</text>
							<text class="shares">{{ item.fen_num }}分享</text>
							<text class="time">{{ item.updatetime }}</text>
						</view>
						<image :src="commentImg" @click.stop="handleInfoShow(index)"></image>
						<view class="pop_box" v-if="item.infoShow">
							<view class="pop_item" @click.stop="handlezan(item)">
								<!-- <image :src="icon21" style="width: 32rpx; height: 28rpx"></image> -->
								<u-icon name="heart" v-if="item.zan==0" color="#ffffff" size="32rpx"></u-icon>
								<u-icon name="heart-fill" v-if="item.zan==1" color="#f40f40" size="32rpx"></u-icon>
								<text>赞</text>
							</view>
							<view class="line"></view>
							<view class="pop_item" @click.stop="makeMsg(item)">
								<!-- <image src="/static/icon.png" style="width: 32rpx; height: 32rpx"></image> -->
								<u-icon name="attach" color="#ffffff" size="32rpx"></u-icon>
								<text>评论</text>
							</view>
							<view class="line"></view>
							<view class="pop_item" @click.stop="makePhoneCall(item.phone)">
								<u-icon name="phone" color="#ffffff" size="32rpx"></u-icon>
								<!-- <image :src="icon22" style="width: 32rpx; height: 32rpx"></image> -->
								<text>电话</text>
							</view>
						</view>
					</view>

					<u-modal :show="msgshow" :title="msgtitle" confirmText="确认" cancelText="取消" :showCancelButton="true"
						@cancel="msgshow = false" @confirm="sureconfirm">
						<view class="slot-content"
							style="border: 1px #999 solid;padding: 20rpx;border-radius: 10rpx;width: 96%;">
							<textarea v-model="msgcontent" style="height: 80px;width: 100%;" cols="3" rows="1"
								placeholder="请输入评论"></textarea>
						</view>
					</u-modal>
					<view v-if="item.comment_list && item.comment_list.length > 0">
						<view class="msgtitle">评论</view>

						<!-- <comment-item
              v-for="(comment, w) in item.comment_list"
              :key="w"
              :comment="comment"
              :item="item"
              @reply="huifu" /> -->
						<view class="msgList" v-for="(c, v) in item.comment_list">
							<view class="msmall" @click.stop="huifu(c, item)">
								<view>
									<text style="color: #2979ff">{{ c.username }}</text>
									：{{ c.content }}
								</view>
							</view>
							<view v-for="(a, b) in c.list" @click.stop="huifu(a, item)">
								<view style="margin-top: 10rpx">
									<view>
										<text style="color: #2979ff">{{ a.username }}</text>
										回复
										<text style="color: #2979ff">{{ c.username }}</text>
										：{{ a.content }}
									</view>
								</view>
								<view v-for="(d, f) in a.list" @click.stop="huifu(d, item)">
									<view style="margin-top: 10rpx">
										<view>
											<text style="color: #2979ff">{{ d.username }}</text>
											回复
											<text style="color: #2979ff">{{ a.username }}</text>
											：{{ d.content }}
										</view>
									</view>
								</view>
								<!--  -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <u-loadmore v-if="houseList.length >= 5" :status="status" /> -->
			<!-- </scroll-view> -->
		</z-paging>
		<uni-popup ref="popup" style="background-color: #ffffff" @change="change">
			<view class="filter_box" style="background-color: #ffffff">
				<view class="dropdown-content">
					<view class="content">
						<view class="option-list">
							<view class="option-item" v-show="currentTab !== 3"
								v-for="(option, idx) in filterTabs[currentTab].options" :key="idx"
								@click="selectOption(option)">
								<text :class="[
                    'option-text',
                    filterTabs[currentTab].value === option.value
                      ? 'active'
                      : '',
                  ]">
									{{ option.label }}
								</text>
							</view>
							<view class="type_cz" v-show="currentTab == 3">
								<view class="title">出租户型</view>
								<view class="tags-list">
									<view class="tag-item" v-for="(tag, index) in tags" :key="index"
										:class="{ active: selectedTags.includes(tag) }" @click="toggleTag(tag)">
										{{ tag.name }}
									</view>
								</view>
								<!-- <view class="title">装修类型</view>
                <view class="tags-list">
                  <view
                    class="tag-item"
                    v-for="(tag, index) in tagsType"
                    :key="index"
                    :class="{ active: selectedTagsType.includes(tag) }"
                    @click="toggleTagType(tag)">
                    {{ tag }}
                  </view>
                </view> -->
								<!-- <view class="title">类型</view>
                <view class="tags-list">
                  <view
                    class="tag-item"
                    v-for="(tag, index) in tags"
                    :key="index"
                    :class="{ active: selectedTags.includes(tag) }"
                    @click="toggleTag(tag)">
                    {{ tag }}
                  </view>
                </view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 发布按钮 -->
		<publish-btn type="house"></publish-btn>
	</view>
</template>

<script>
	import PublishBtn from "@/components/publish-btn/publish-btn.vue";
	import commentItem from "./comment-item.vue";
	import {
		getTypeList,
		getArea2,
		getHouseTypeList,
		getpublishList,
		addComment,
		getcollect,
		sharePage
	} from "@/api/gent.js";
	export default {
		components: {
			PublishBtn,
			commentItem,
		},
		data() {
			return {
				msgshow: false,
				msgcontent: "",
				msgtitle: "随便说点什么",
				show: false,
				infoShow: false,
				communityName: "萧岗社区",
				showDropdown: false,
				currentTab: 9,
				commentImg: this.$Config.HTTP_REQUEST_URL + "/img/icon20.png",
				icon21: this.$Config.HTTP_REQUEST_URL + "/img/icon21.png",
				icon22: this.$Config.HTTP_REQUEST_URL + "/img/icon22.png",
				filterTabs: [{
						name: "地区",
						value: "",
						options: [{
								label: "全部",
								value: "all",
							},
							{
								label: "萧岗",
								value: "xiaogang",
							},
							{
								label: "城中村",
								value: "village",
							},
						],
					},
					{
						name: "房屋转租",
						value: "",
						options: [{
								label: "全部",
								value: "all",
							},
							{
								label: "整租",
								value: "entire",
							},
							{
								label: "合租",
								value: "shared",
							},
						],
					},
					{
						name: "默认排序",
						value: "",
						options: [{
								label: "默认排序",
								value: "0",
							},
							{
								label: "最热",
								value: "1",
							},
							{
								label: "最新",
								value: "2",
							},
							{
								label: "距离最近",
								value: "3",
							},
						],
					},
					{
						name: "筛选",
						value: "",
						options: [{
								label: "全部",
								value: "all",
							},
							{
								label: "押一付一",
								value: "1_1",
							},
							{
								label: "押一付三",
								value: "1_3",
							},
						],
					},
				],
				tags: [],
				selectedTags: [],
				houseList: [],
				statusBarHeight: 0,
				tagsType: ["哈哈", "嘻嘻"],
				selectedTagsType: [],
				scrollTop: 0, // 滚动条位置，距顶为0
				oldScrollTop: 0,
				pageNum: 1,
				pageSize: 3,
				status: "loadmore",
				total: 0,
				pjcontent: "",
				newhid: "",
				dynamicTitle: "", // 初始标题
				detailInfo: null
			};
		},
		onShareAppMessage(e) {
			if (e.from === "button") {
				// 来自页面内转发按钮
				this.getsharePage();
			}
			return {
				title: this.detailInfo.house_type + ':' + this.detailInfo.money + '元/月' || '房屋转租',
				path: "/pages/house-transfer-detail/house-transfer-detail?id="+this.detailInfo.id,
				imageUrl: this.detailInfo.photos_path[0],
			};
		},
		mounted() {
			this.getStatusBarHeight();
			//获取房屋转租
			this.getGent();
			this.getHouseTypeList();
			this.getArea();
		},
		onLoad(e) {
			console.log(e);
			this.filterTabs[0].value = uni.getStorageSync("community") ?
				uni.getStorageSync("community") :
				e.community;
		},
		computed: {
			computedTitle() {
				return "房屋转租-" + this.dynamicTitle;
			},
		},
		watch: {
			// 监听数据变化，重新设置标题（可选）
			dynamicTitle(newVal) {
				this.updateTitle();
			},
		},
		methods: {
			async getsharePage() {
				const res = await sharePage({
					id: this.detailInfo.id,
				});
			},
			updateTitle(val) {
				uni.setNavigationBarTitle({
					title: this.computedTitle, // 使用计算属性作为标题
				});
			},
			makeMsg(val) {
				this.pjcontent = val;
				val.infoShow = false;
				this.msgtitle = "随便说点什么";
				this.msgshow = true;
			},
			sureconfirm() {
				if (this.msgcontent == "") {
					return this.$Toast('请输入内容')
				}
				addComment({
					pub_id: this.pjcontent.id,
					content: this.msgcontent,
					pid: this.newhid,
				}).then(res => {
					this.msgshow = false;
					this.msgcontent = ''
					this.$Toast('提交成功')
					this.refreshList();
				})
			},
			huifu(val, id) {
				console.log(val, id);
				this.msgcontent = "";
				this.pjcontent = id;
				this.msgshow = true;
				this.msgtitle = "回复:" + val.username;
				this.newhid = val.id;
			},
			getaddress() {
				wx.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
					},
				});
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				getpublishList({
					limit: pageSize,
					page: pageNo,
					type: 1,
					area_id: this.filterTabs[0].value ? this.filterTabs[0].value : "",
					order: this.filterTabs[2].value ? this.filterTabs[2].value : "",
					housetype: this.filterTabs[1].value ? this.filterTabs[1].value : "",
					selectedTagsType: this.selectedTags
						.map((item) => Number(item.value))
						.join(","),
				}).then(res => {
					if (res.data.data.data) {
						res.data.data.data.forEach((item) => {
							item.infoShow = false;
						});
					}
					this.$refs.paging.complete(res.data.data.data);
				}).catch(error => {
					this.$refs.paging.complete(false);
				})
			},

			async getArea() {
				const res = await getArea2({
					cid: 2,
				});
				if (res.response.statusCode === 200) {
					console.log(res.data.data);
					this.filterTabs[0].options = Object.keys(res.data.data).map((key) => {
						return {
							value: key,
							label: res.data.data[key],
						};
					});

					var newlabel = this.filterTabs[0].options.find(
						(item) => item.value == uni.getStorageSync("community")
					);
					this.dynamicTitle = newlabel.label;
				}
				console.log(this.filterTabs[0].options, 234);
			},
			async getHouseTypeList() {
				const res = await getHouseTypeList();
				if (res.response.statusCode === 200) {
					const vueReactiveArray = Object.keys(res.data.data).map((key) => {
						return {
							name: res.data.data[key],
							value: key,
						};
					});
					this.tags = [...vueReactiveArray];
				}
			},
			change(e) {
				this.show = e.show;
			},
			async getGent() {
				const res = await getTypeList();
				if (res.response.statusCode === 200) {
					console.log(res.data.data, "res.data.data");
					this.filterTabs[1].options = Object.keys(res.data.data).map((key) => {
						return {
							value: key,
							label: res.data.data[key],
						};
					});
				}
			},

			handleTabClick(index) {
				this.currentTab = index;
				this.$refs.popup.open("top");
			},
			selectOption(option) {
				this.filterTabs[this.currentTab].value = option.value;
				this.filterTabs[this.currentTab].name = option.label;
				this.dynamicTitle = option.label;
				this.updateTitle();
				this.$refs.popup.close();
				this.refreshList();
			},
			handlezan(item) {
				let operateType = item.zan == 1 ? 2 : 1
				getcollect({
					id: item.id,
					type: 2, //1收藏2点赞
					operate_type: operateType, //  1确认2取消
				}).then(res => {
					if (operateType == 1) {
						this.$Toast('已点赞')
					} else {
						this.$Toast('取消点赞')
					}
					item.infoShow = false;
					this.refreshList();
				})
			},

			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			handleInfoShow(v) {
				this.houseList[v].infoShow = !this.houseList[v].infoShow;
				// this.infoShow = !this.infoShow;
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/house-transfer-detail/house-transfer-detail?id=" + item.id,
				});
			},
			getStatusBarHeight() {
				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight;
						console.log("状态栏高度:", this.statusBarHeight);
					},
				});
			},
			toggleTag(tag) {
				const index = this.selectedTags.indexOf(tag);
				if (index > -1) {
					this.selectedTags.splice(index, 1);
				} else {
					this.selectedTags.push(tag);
				}
				this.refreshList();
			},
			toggleTagType(tag) {
				const index = this.selectedTagsType.indexOf(tag);
				if (index > -1) {
					this.selectedTagsType.splice(index, 1);
				} else {
					this.selectedTagsType.push(tag);
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.msgtitle {
		font-weight: 500;
		padding-bottom: 20rpx;
		border-bottom: 1px #f5f6fa solid;
		color: #666;
		margin-top: 30rpx;
	}

	.msgList {
		// padding: 20rpx 10rpx;
		// display: flex;
		color: #666;

		.msmall {
			display: flex;
			width: 100%;
			margin-top: 20rpx;
		}

		.mgsName {
			color: #2979ff !important;
		}
	}

	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
		padding-top: constant(safe-area-inset-top);
		/* 为了适配刘海屏等 */
		padding-top: calc(env(safe-area-inset-top));
		/* 为了适配刘海屏等 */
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
	}

	.scroll_box {
		width: 100%;
		max-height: calc(100vh -160px);
		height: 96vh;
		overflow-y: auto;
		position: absolute;
		top: 20rpx;
	}

	.filter-tabs {
		left: 0;
		right: 0;
		position: fixed;
		z-index: 999999;
		background-color: #ffffff;

		.tab-list {
			display: flex;
			padding: 24rpx 0;

			.tab-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.tab-text {
					font-size: 28rpx;
					color: #333;
					margin-right: 8rpx;

					&.active {
						color: #2979ff;
					}
				}
			}
		}
	}

	.house-list {
		padding: 100rpx 24rpx 24rpx;

		.house-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;

			.user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.user-info-left {
					display: flex;
					align-items: center;
				}

				.user-info-right {

					button {
						margin: unset;
						padding: unset;
						background-color: #ffffff;
					}

					button::after {
						border: none;
					}

					.share-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 10rpx;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #2979ff;
						margin-bottom: 16rpx;

						text {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #ffffff;
						}
					}
				}

				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.nickname {
					font-size: 28rpx;
					color: #333;
					margin-right: 16rpx;
				}

				.location {
					font-size: 24rpx;
					color: #999;
				}

				.tag {
					font-size: 24rpx;
					color: #2979ff;
					background: rgba(41, 121, 255, 0.1);
					padding: 4rpx 16rpx;
					border-radius: 4rpx;
				}
			}

			.house-info {
				margin-bottom: 24rpx;

				.price-info,
				.type-info,
				.contract-info {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.label {
						font-size: 28rpx;
						color: #666;
						width: 140rpx;
					}

					.price {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}

					.value {
						font-size: 28rpx;
						color: #333;
					}
				}
			}

			.call-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f0f7ff;
				border-radius: 8rpx;
				padding: 20rpx 0;
				margin-bottom: 24rpx;

				text {
					font-size: 28rpx;
					color: #2979ff;
					margin-left: 8rpx;
				}
			}

			.image-list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 8rpx;
				margin-bottom: 24rpx;

				.house-img {
					width: 100%;
					height: 160rpx;
					border-radius: 8rpx;
				}
			}

			.address-info {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.address {
					font-size: 26rpx;
					color: #07c160;
					margin-left: 8rpx;
				}
			}

			.view-info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				justify-content: space-between;
				position: relative;
				height: 78rpx;

				.views,
				.shares {
					margin-right: 16rpx;
				}

				image {
					width: 40rpx;
					height: 36rpx;
				}

				.pop_box {
					right: 66rpx;
					width: 450rpx;
					height: 78rpx;
					background: #4c4c4c;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;

					.line {
						width: 2rpx;
						height: 46rpx;
						box-sizing: border-box;
						border: 2rpx solid #979797;
						margin: 0 42rpx;
					}

					.pop_item {
						display: flex;
						align-items: center;

						image {
							margin-right: 12rpx;
						}
					}
				}
			}
		}
	}

	.dropdown-content {
		top: 84rpx;
		left: 0;
		right: 0;
		z-index: 100;
		position: absolute;

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.tags-list {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					margin-bottom: 24rpx;

					.tag-item {
						padding: 12rpx 24rpx;
						font-size: 24rpx;
						color: #666;
						background: #f5f5f5;
						border-radius: 4rpx;

						&.active {
							color: #2979ff;
							background: rgba(41, 121, 255, 0.1);
						}
					}
				}

				.type_cz {
					padding: 0 30rpx;

					.title {
						font-size: 26rpx;
						color: #666666;
						margin-bottom: 20rpx;
						margin-top: 20rpx;
					}
				}

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>